<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <h2>个人信息</h2>
    <el-row v-if="userInfo.staff">
        <el-col :span="9">
            <div style="height: 400px;text-align: center">
                <el-image :src="userInfo.staff.url">
                    <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                    </div>
                </el-image>
                <el-upload
                        ref="upload"
                        :limit="1"
                        :show-file-list="false"
                        action="fakeaction"
                        :http-request="uploadPictures">
                    <el-button style="margin: 15px 0" size="small" type="primary">上传图片</el-button>
                </el-upload>
            </div>
        </el-col>
        <el-col :span="10" :offset="2">
            <el-descriptions title="基本信息" v-if="userInfo.staff" :column="1" size="medium">
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="编号">
                    {{userInfo.staffid}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="姓名">
                    {{userInfo.staffname}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="所属部门">
                    {{userInfo.deptname}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="入职时间">
                    {{userInfo.staff.entrytime}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="职位">
                    {{userInfo.rolename}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="身份证号">
                    {{userInfo.staff.idcard}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="手机号">
                    {{userInfo.staff.phone}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="地址">
                    {{userInfo.staff.address}}
                </el-descriptions-item>
            </el-descriptions>
        </el-col>
    </el-row>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            userInfo: {}
        },
        created() {
        },
        mounted() {
            this.getUserInfo();
        },
        methods: {
            /*获取个人信息*/
            getUserInfo() {
                axios.get('/user/getUserInfo').then(res => {
                    this.userInfo = res.data.data;
                })
            },
            /*上传图片*/
            uploadPictures(params) {
                const file = params.file;
                // 根据后台需求数据格式
                const form = new FormData();
                // 文件对象
                form.append("file", file);

                axios.post("/user/uploadPictures", form).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                    }
                    this.getUserInfo();
                    setTimeout(() => {
                        /*刷新父级页面*/
                        parent.location.reload();
                    }, 200);

                }).catch((error) => {
                    console.log(error)
                })
            },

        }
    })
</script>
<style>
    .my-label {
        font-weight: bold;
        height: 30px;
        line-height: 30px;
    }

    .my-content {
        height: 30px;
        line-height: 30px;
        text-indent: 1em;
    }
</style>
</body>
</html>
